Ext.define('WebMeV.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',
    requires: [
    'WebMeV.view.ribbon.RibbonBar',
    'WebMeV.view.ribbon.items.Home'
    ],
    
    initComponent: function() {
        this.items = {
            dockedItems: [{
                dock: 'top',
                xtype: 'ribbonbar',                 
                autoHeight: true,
                items: [{
                    xtype: 'home'
                }]
            },{
                dock: 'bottom',
                xtype: 'toolbar',
                height: 25,
                items: [
                '->',
                Ext.create('Ext.ProgressBar', {
                    text: 'Initializing...',
                    id: 'prgb',
                    hidden: true,
                    width: 300,
                    value: 0
                })
                ]
            }],
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                width: 250,
                xtype: 'panel',
                id: 'west-region',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    //xtype: 'navigation',
                    flex: 1
                }, {
                    //xtype: 'map',
                    height: 250
                    
                }]
            }, {
                xtype: 'container',
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    //xtype: 'main',
                    flex: 1
                }, {
                    //xtype: 'console',
                    height: 150
                }]
            }]
            };     
        this.callParent();        
    }
});

